<script setup>
import { ref, computed, onMounted } from "vue";
import TodoItem from "../components/todoitem.vue"
import { getlist,add } from "../request/todolist"
defineProps({
  msg: String,
});

const itemvalue = ref("");
const listdata = ref([]);
const adddata =async () => {

if(!itemvalue.value){
  alert('不能为空')
  return
}
  const data = {
    itemname: itemvalue.value,
    state: 0,
    showInput: false,
    userid:localStorage.getItem('userid')
  };

  listdata.value.push(data)

//  const result= await add(data)

//  if(result){
//   getdata()
//  }
};
onMounted(() => {
  
  getdata();
});

const searchdata =async () => { 
await getdata(itemvalue.value)

}; 
const getdata = async (searchText) => {
 listdata.value =[] // await getlist(searchText);

};
const resetInput=(index)=>{ 
    for (let i = 0; i < listdata.value.length; i++) {
  if (i != index) listdata.value[i].showInput = false;
}
}

</script>

<template>
  <div class="card">
    <h1>{{ msg }}</h1>
    <input type="text" v-model="itemvalue" />
    <button type="button" @click="adddata">添加数据</button>

    <button type="button" @click="searchdata">搜索</button>
    <!-- <input type="checkbox" v-model="showAll" value="显示全部"> -->
    <button type="button" @click="getdata">获取后端数据</button>
    <table border="1">
        <tr>
            <th>代办事项</th><th>状态</th><th>管理</th>
        </tr>
        <tr v-for="(item, index) in listdata" :key="index">
            <TodoItem :item="item" @refresh="getdata"  @reset="resetInput(index)"></TodoItem>
        </tr>
    </table>
  </div>
</template>
<style>
</style>